<template>
  <div class="app-container">
    <!-- 如果没有选择模块，显示模块选择页面 -->
    <ModuleSelector v-if="!currentModule" @module-select="handleModuleSelect" />

    <!-- 如果选择了模块，显示对应的模块页面 -->
    <component v-else :is="currentModuleComponent" :module-config="currentModuleConfig"
      @back-to-home="handleBackToHome" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import ModuleSelector from "./ModuleSelector.vue";
import EmailModule from "./modules/EmailModule.vue";
import ContactsModule from "./modules/ContactsModule.vue";
// import AnnouncementModule from "./modules/AnnouncementModule.vue";
// import NewsModule from "./modules/NewsModule.vue";
// import DocumentModule from "./modules/DocumentModule.vue";

// 当前选中的模块
const currentModule = ref("");

// 模块配置
const moduleConfigs = {
  email: {
    name: "邮件管理",
    component: "EmailModule",
    description: "企业内部邮件收发、群发、模板管理等功能",
    menuItems: [
      { key: "send", label: "发送邮件", icon: "✉️" },
      { key: "inbox", label: "收件箱", icon: "📥" },
      { key: "outbox", label: "发件箱", icon: "📤" },
      { key: "template", label: "模板管理", icon: "📝" },
      { key: "stats", label: "统计报表", icon: "📊" },
    ],
  },
  contacts: {
    name: "通讯录管理",
    component: "ContactsModule",
    description: "组织架构、联系人信息、分组与标签管理",
    menuItems: [
      { key: "directory", label: "组织架构", icon: "🏢" },
      { key: "contacts", label: "联系人", icon: "👥" },
      { key: "groups", label: "分组管理", icon: "📁" },
      { key: "tags", label: "标签管理", icon: "🏷️" },
      { key: "import", label: "导入导出", icon: "📤" },
    ],
  },
  announcement: {
    name: "公告管理",
    component: "AnnouncementModule",
    description: "企业内部公告发布、审批、已读追踪等功能",
    menuItems: [
      { key: "list", label: "公告列表", icon: "📋" },
      { key: "publish", label: "发布公告", icon: "📢" },
      { key: "pending", label: "待审批", icon: "⏳" },
      { key: "stats", label: "已读统计", icon: "📊" },
      { key: "archive", label: "历史归档", icon: "📚" },
    ],
  },
  news: {
    name: "新闻管理",
    component: "NewsModule",
    description: "企业新闻发布、分类管理、浏览统计等功能",
    menuItems: [
      { key: "home", label: "新闻首页", icon: "🏠" },
      { key: "publish", label: "发布新闻", icon: "✍️" },
      { key: "category", label: "分类管理", icon: "📂" },
      { key: "archive", label: "历史归档", icon: "📚" },
      { key: "stats", label: "浏览统计", icon: "📊" },
    ],
  },
  document: {
    name: "文档管理",
    component: "DocumentModule",
    description: "企业文档上传、分组、权限管理等功能",
    menuItems: [
      { key: "list", label: "文档列表", icon: "📄" },
      { key: "upload", label: "上传文档", icon: "📤" },
      { key: "groups", label: "分组管理", icon: "📁" },
      { key: "permissions", label: "权限管理", icon: "🔒" },
      { key: "stats", label: "统计信息", icon: "📊" },
    ],
  },
};

// 计算当前模块的组件
const currentModuleComponent = computed(() => {
  if (!currentModule.value) return null;
  const config = moduleConfigs[currentModule.value];
  return config ? config.component : null;
});

// 计算当前模块的配置
const currentModuleConfig = computed(() => {
  return currentModule.value ? moduleConfigs[currentModule.value] : null;
});

// 处理模块选择
const handleModuleSelect = (moduleKey) => {
  currentModule.value = moduleKey;
};

// 处理返回首页
const handleBackToHome = () => {
  currentModule.value = "";
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>
